<template>
  <div>
    <table class="table table-bordered mt-3 mb-1" :class="isViewMode ? 'report-finish' : ''">
      <tbody>
        <tr>
          <td class="font-weight-bold" data-font-bold="true" colspan="10">资金需求</td>
        </tr>
        <tr>
          <td colspan="2" width="20%">申请金额(万元)</td>
          <td colspan="2" width="18%">贷款年限</td>
          <td colspan="2" width="20%">建议金额(万元)</td>
          <td colspan="2" width="20%">批复金额(万元)</td>
          <td colspan="2" width="22%">主要用途</td>
        </tr>
        <tr>
          <td class="report-input-td" colspan="2">
            <span v-if="isViewMode">{{ latestRelatedView.apply_funds || '-' }}</span>
            <el-input
              v-else
              v-model="latestRelatedView.apply_funds"
              @blur="SaveData('apply_funds')"
              placeholder="输入金需求金额"
              type="number"
            ></el-input>
          </td>
          <td class="report-input-td" colspan="2">
            <span v-if="isViewMode">{{ latestRelatedView.load_years || '-' }}</span>
            <el-input
              v-model="latestRelatedView.load_years"
              v-else
              @blur="SaveData('load_years')"
              placeholder="输入贷款年限"
              type="number"
            ></el-input>
          </td>
          <td colspan="2">
            {{ latestRelatedView.approved_funds || '-' }}
          </td>
          <td colspan="2">
            <span>{{ latestRelatedView.res_funds || '-' }}</span>
          </td>
          <td class="report-input-td" colspan="2">
            <div v-if="isViewMode" class="p-1">{{ latestRelatedView.funds_use_dir || '-' }}</div>
            <el-input
              v-else
              @blur="SaveData('funds_use_dir')"
              v-model="latestRelatedView.funds_use_dir"
              placeholder="输入主要用途"
            ></el-input>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
// import { putFarm } from '@/common/api/industrial'
export default {
  components: {},
  props: {
    queryId: {
      type: String,
      default: '',
    },
    viewMode: {
      type: Boolean,
      default: false,
    },
    related: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      latestRelatedView: {},
    }
  },
  computed: {
    isViewMode() {
      return this.viewMode
    },
  },
  watch: {
    related: {
      handler: function () {
        this.latestRelatedView = { ...this.related }
      },
      immediate: true,
    },
  },
  mounted() {},
  created() {},
  methods: {
    SaveData(key) {
      if (this.related[key] !== this.latestRelatedView[key]) {
        const data = {}
        data[key] = this.latestRelatedView[key]
        this.$api
          .updateData(this.$serviceName, 'customer_related', this.queryId, data)
          .catch(err => {
            this.$message.error(`修改资金需求信息失败${err}`)
          })
          .finally(() => {
            this.$emit('save', true)
          })
      }
    },
  },
}
</script>
<style lang="scss" scoped>
@import '@/gov/components/creditFile/style.scss';
</style>
